<template>
 <transition name="order">
  <div class="home">
    <div class="head">
      <md-tab-bar
        v-model="current"
        :items="items"
        :maxLength="5"
        :ink-length="40"
        @change="onChange"
        immediate
      />
    </div>
    <div class="main">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        auto-reflow
      >
      <div class="list" v-for="(i,idx) of data" :key='idx'>
          <div class="top">
              <p>订单编号:{{i.uid}}</p>
              <p>待提交</p>
          </div>
          <div class="box">
              <div class="left">
                  <img :src="i.img" alt="">
                  <span>美团</span>
              </div>
              <div class="right">
                 <p>{{i.name}}</p>
                 <p>{{i.askdec}}</p>
                 <p>特殊要求:{{i.specask}}</p>
                 <p>报名后须当天提交资料，以免影响返现</p>
              </div>

          </div>

          <div class="bottom">
              <p @click="$router.push({name:'detial',query:{
                    id:i.id
                }})">
                活动详情
                <span></span>
              </p>
              <div>
                <p @click="cancel(i.uid)">取消订单</p>
                <p  @click="$toast.info('已有5个页面,剩下放假再搞',3000)">提交资料</p>
              </div>          
          </div>
      </div>

      </md-scroll-view>
    </div>

      
    <div class="foot ">
          <div v-for="(i,idx) of currento"  :key="idx"   @click="change(idx)" :class="{active:idx == m}" >
            <i :class="i.icon"></i>
            <p>{{i.tit}}</p>
          </div>
         
    </div>

  </div>
  </transition>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { bookone, bookupdate, addClient, bookInfo } from "@/apis/client";

export default {
  name: "order",
  data() {
    return {
      current: 1,
       m:null,
      items: [
        { name: 1, label: "全部" },
        { name: 2, label: "待处理" },
      ],
      data:[],
        currento: [
        {tit:"首页",icon:"iconfont icon-shouye"},
         {tit:"淘宝特价",icon:"iconfont icon-taobaotese"},
         {tit:"我的",icon:"iconfont icon-wode"},

      ],
    };
  },
  watch:{

  },
  mounted() {
    this.fn();
  },
  methods: {
     change(idx){
      console.log(idx);
        this.m=idx;
      this.$router.push({name:'Home'})
    },
    async cancel(uid){
           let res = await bookupdate({ uid,state: 0 });
           console.log(res);
            this.fn() 

    },
    async fn() {
      let res = await bookInfo({ state: 1 });
      this.data=res.data
      console.log(this.data);
      
    },
    onChange(item, index, prevIndex) {
      if (index === 1){
           this.$router.push({name:'kinddetail'})
    return this.$toast.info("玩命开发中", 3000);
      }
      if (index === 0) {
        console.log("haha");
      }
    },
  },
  computed: {
    ...mapState({
      res: (state) => state.bookone,
    }),
  },
};
</script>


<style lang="scss" scoped>
  .order-enter-active,.order-leave-active{
    transition: all 0.3s;
  }
  .order-enter,.order-leave-to{
     opacity: 0;
  }
  .order-enter-to,.order-leave{
    opacity: 1;
  }




.home {
  // position: absolute;
  // z-index: 99999;
  // top: 0;left: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  .head {
    height: 120px;
    // border: 1px solid black;
    ::v-deep .md-tab-bar {
      height: 100%;
      color: red !important;
    }
    ::v-deep .md-tab-bar-item {
      margin: 0;
      padding: 0;
      min-height: 100px;
      font-size: 50px;
      width: 80px;
    }
    ::v-deep .md-tab-bar-item.is-active {
      color: red;
      font-weight: bold;
    }
    ::v-deep .md-tab-bar-ink {
      background: red;
    }
  }
  .main {
    height: 0;
    flex-grow: 1;

    background: #f0f2f7;
    padding: 0 20px;
    box-sizing: border-box;

    .list {
      padding-bottom:24px ;
      width: 100%;

      background: white;
      border-radius: 20px;
      margin-top: 40px;
      .top{
        display: flex;
        justify-content: space-between;
        padding: 30px;
        font-size: 42px;
        font-family: "Microsoft YaHei","黑体","宋体",sans-serif;
        &>p:nth-of-type(2){
          color: red;
          font-weight: bold;
        }
      }
      .box{
        height: 282px;
       
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
        .left{
          width: 216px;
          height: 216px;
          position: relative;
          span{
            padding: 10px;
            font-size: 16px;
            border-radius: 20px;
            background: #fcc406;
            position: absolute;
            top: -30px; left: -20px ;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        .right{
            font-size: 40px;
              flex: 1;
          margin-left: 38px;
            
            &>p:nth-of-type(1){
              font-size: 46px;
              font-weight: bold;
            }
             &>p:nth-of-type(4){
               font-size: 28px;
               color: red;
             }
        }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        margin-top: 20px;
        &>p{
          color: rgb(24, 185, 59);
          width: 200px;
          span{
            height: 2px;
            background: rgb(24, 185, 59);
            display: block;
            margin-top: 20px;
          }

        }
        &>div{
          display: flex;
          p{
            padding:10px 18px;
            font-size: 42px;
            border-radius: 30px;
          }
          &>P:nth-of-type(1){
            
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin-right: 40px;
          } 
          &>P:nth-of-type(2){
              background: #fd0421;
              color: white;
              
              
          }
        }
      }
    }
  }

   .foot {
    height: 140px;

    display: flex;
    justify-content: space-around;
    background: white;
    align-items: center;
    .active{
      color: red;
    }
    &>div{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      align-items: center;
      &>i{
        font-size: 66px;
     
      }
      &>p{
        font-size: 20px;
      }
    }
  }
}
</style>
